<!-- html -->
<template>
    <el-row>
        <el-col :span="2">
            <el-menu @open="handleOpen" @close="handleClose">
                <el-sub-menu index="1">
                    <template #title>诗词歌赋</template>
                    <el-menu-item index="1-1" @Click="shi">诗</el-menu-item>
                    <el-menu-item index="1-2">词</el-menu-item>
                    <el-menu-item index="1-3">歌</el-menu-item>
                    <el-menu-item index="1-4">赋</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>用户</template>
                    <el-menu-item index="2-1">用户管理</el-menu-item>
                    <el-menu-item index="2-2">用户登录查询</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-col>
        <el-col :span="22">
            <RouterView />
        </el-col>
    </el-row>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
    name: 'menuPage'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { useRouter } from 'vue-router'

//数据
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
let router = useRouter()
//方法
function shi() {
    router.push({
        path: '/shi'
    })
}
</script>

<!-- 样式 -->
<style scoped></style>